<template>
  <div class="header">
    <img
      v-if="userInfo.head_img"
      :src="$axios.defaults.baseURL + userInfo.head_img"
      alt=""
    />
    <img v-else src="../assets/hyjpg.jpg" alt="" />
    <div class="name">{{ userInfo.nickname }}</div>
    <div class="exit" @click="headelExit">退出</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("user")),
    };
  },
  mounted() {
    console.log(this.userInfo);
  },
  methods: {
    headelExit() {
      localStorage.removeItem("token");
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  align-items: center;
  justify-content: flex-end;
  display: flex;
  margin-right: 60px;
  color: #fff;
  .name {
    margin-left: 10px;
  }
  .exit {
    margin: 0 15px;
    color: #fff;
    cursor: pointer;
  }
  img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
  }
}
</style>
